<template>
  <div class="User">
    <input v-model.number="center.lng" />
    <input v-model.number="center.lat" />
    <input v-model.number="zoom" />
    <baidu-map
      class="map"
      :center="center"
      :zoom="14"
      :scroll-wheel-zoom="true"
      @dragging="getC"
      @mousemove="syncPolyline"
      @click="paintPolyline"
      @rightclick="newPolyline"
      @ready="setDistanceToolInstance"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom"
    >
      <bm-control>
        <el-button @click="toggle('polyline')">
          {{ polyline.editing ? "停止绘制" : "开始绘制" }}
        </el-button>
      </bm-control>
      <bm-control>
        <el-button
          @click="openDistanceTool"
          style="position: absolute; right: -200px; top: 0px; z-index: 20"
          >开启测距</el-button
        >
      </bm-control>
      <bm-polyline
        :path="path"
        v-for="(path, index) of polyline.paths"
        :key="index"
      ></bm-polyline>
      <bm-marker
        :position="center"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      ></bm-marker>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
    </baidu-map>
  </div>
</template>


<script>
import DistanceTool from "bmaplib.distancetool";
export default {
  name: "User",
  data() {
    return {
      polyline: {
        editing: false,
        paths: [],
      },
      center: {
        lng: 116.404,
        lat: 39.915,
      },
      zoom: 15,
      mark: {},
    };
  },
  unmount() {
    distanceTool && distanceTool.close();
  },
  methods: {
    toggle(name) {
      this[name].editing = !this[name].editing;
    },
    syncPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        return;
      }
      const path = paths[paths.length - 1];
      if (!path.length) {
        return;
      }
      if (path.length === 1) {
        path.push(e.point);
      }
      this.$set(path, path.length - 1, e.point);
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      if (!paths.length) {
        paths.push([]);
      }
      const path = paths[paths.length - 1];
      path.pop();
      if (path.length) {
        paths.push([]);
      }
    },
    paintPolyline(e) {
      if (!this.polyline.editing) {
        return;
      }
      const { paths } = this.polyline;
      !paths.length && paths.push([]);
      paths[paths.length - 1].push(e.point);
    },
    //测距
    setDistanceToolInstance({ map }) {
      this.distanceTool = new DistanceTool(map, { lineStroke: 2 });
    },
    openDistanceTool(e) {
      const { distanceTool } = this;
      distanceTool && distanceTool.open();
    },
    //  坐标拾取
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
      this.zoom = e.target.getZoom();
    },
  },
  //显示中心点
  getC() {
    let timer;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        this.mark = {
          lng: this.center.lng,
          lat: this.center.lat,
        };
        console.log("防抖！");
      }, 500);
    };
  },

};
</script>


<style scoped>
.User {
  width: 100%;
  height: 800px;
}
.map {
  width: 100%;
  height: 100%;
}
</style>